<template>
  <div class="member-list">
    <a-form class="search-form">
      <a-row :gutter="gutter">
        <a-col :lg="7" :xl="7" :xxl="4">
          <a-form-item label="津贴类型">
            <a-input-group class="query-item" compact>
              <a-select style="width: 100%" v-model="subType">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">补贴</a-select-option>
                <a-select-option value="2">提成</a-select-option>
                <a-select-option value="3">扣减</a-select-option>
                <!-- 0 全部 1 补贴 2 提成 3 扣减 -->
              </a-select>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="7" :xl="7" :xxl="4">
          <a-form-item label="选择角色">
            <a-input-group class="query-item" compact>
              <a-select style="width: 100%" v-model="selectRole">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">服务商</a-select-option>
                <a-select-option value="2">代理商</a-select-option>
                <a-select-option value="3">省级分公司</a-select-option>
                <a-select-option value="4">大区分公司</a-select-option>
                <!-- 0 全部 1 服务商 2 代理商 3 省分公司 4 大区分公司 -->
              </a-select>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="10" :xl="10" :xxl="7">
          <a-form-item label="操作人">
            <a-input-group compact>
              <a-input v-model="adminWords" placeholder="请输入操作人" />
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="11" :xxl="9">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 40%" v-model="seachType">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">流水号</a-select-option>
                <a-select-option value="2">名称</a-select-option>
                <a-select-option value="3">联系方式</a-select-option>
                <!-- 0 全部 1 流水号 2 名称 3 联系方式 -->
              </a-select>
              <a-input style="width: 60%" v-model="keywords" placeholder="请输入查询条件" />
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="13" :xxl="8">
          <a-form-item label="创建时间">
            <a-range-picker
              :placeholder="['开始时间', '结束时间']"
              @change="getCreateTime"
              v-model="createTime"
              class="select-range-time"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :lg="10" :xl="8" :xxl="8">
          <div class="top-btns">
            <a-button type="primary" html-type="submit" @click="searchByKeyword">查询</a-button>
            <a-button type="primary" @click="handleBalance">余额调整</a-button>
            <a-button html-type="reset" @click="resetList">重置</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        :dataSource="subsidyData"
        rowKey="id"
        :scroll="scrollX"
      ></a-table>
      <div class="sum-show">
        <p>
          <i>当页合计：</i>
          {{this.pageSum}}
        </p>
        <p>
          <i>总合计：</i>
          {{this.totalSum}}
        </p>
      </div>
      <pagination :total="total" @loadDataList="loadSubsidy" ref="pageBand" />
    </div>
    <div class="modal-wrap">
      <a-modal
        v-model="addBalance"
        :title="modalTitle"
        :maskClosable="maskClosable"
        :footer="null"
        class="balance-pop"
      >
        <div v-if="modalType === 1">
          <a-button
            type="primary"
            size="large"
            style="width: 100px; margin-left: 60px"
            @click="modalType=2"
          >增加</a-button>
          <a-button
            type="primary"
            size="large"
            style="width: 100px; float: right; margin-right: 60px"
            @click="modalType=3"
          >减少</a-button>
        </div>
        <!-- 余额调整 -->
        <div v-else>
          <a-form :form="form" class="search-form">
            <a-row>
              <a-col :span="21">
                <a-form-item label="增加类型" v-if="modalType === 2">
                  <a-select
                    style="float: right; width: 280px;"
                    v-decorator="[
                      'type',
                      {rules: [{ required: true, message: '请选择增加类型' }]}
                    ]"
                  >
                    <a-select-option v-for="i in typeList" :key="i.key">{{i.value}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="21">
                <a-form-item label="选择角色">
                  <a-select
                    @change="handleChange"
                    style="float: right;width: 280px;"
                    v-decorator="[
                      'role',
                      {
                        rules: [{ required: true, message: '请选择角色' }],
                        initialValue: 0
                      }
                    ]"
                  >
                    <a-select-option v-for="i in characterList" :key="i.key">{{i.value}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="21">
                <a-form-item label="选择对象">
                  <a-input
                    style="float: right;width: 280px;"
                    @click="selectObj"
                    v-decorator="[
                      'user_id',
                      {rules: [{ required: true, message: '请选择对象' }]}
                    ]"
                  >
                    <a-icon slot="suffix" type="solution" />
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="21">
                <a-form-item label="手机号">
                  <a-input :disabled="true" v-model="objTel" style="float: right;width: 280px;"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="21">
                <a-form-item :label="modalType === 2 && modalType !== 1 ? '补贴金额' : '减少金额'">
                  <a-input
                    style="float: right;width: 280px;"
                    v-decorator="[
                      'tips',
                      {rules: [{ required: true, message: '请输入金额' }]}
                    ]"
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="21">
                <a-form-item label="备注">
                  <a-textarea style="float: right;width: 280px;" :rows="4" v-model="memo"></a-textarea>
                </a-form-item>
              </a-col>
            </a-row>
            <a-form-item>
              <a-button type="primary" @click="cancle" style="margin-left: 40px;">取消</a-button>
              <a-button
                type="primary"
                style="float: right;margin-right: 40px;"
                @click="handleSubmit"
                :loading="confirmLoading"
              >确定</a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-modal>
      <!-- 选择对象弹出框 -->
      <a-modal
        v-model="showObjMadal"
        style="top: 20px;"
        :maskClosable="maskClosable"
        :title="objMadalTitle"
        :footer="null"
        :width="objectWidth"
      >
        <a-form>
          <a-form-item>
            <a-select
              v-if="characterType === 2"
              @change="objLevelSel"
              style="width: 120px; margin-right: 30px"
              :defaultValue="0"
            >
              <a-select-option v-for="i of levelList" :key="i.key">{{i.value}}</a-select-option>
            </a-select>
            <a-input
              style="width:200px;"
              placeholder="请输入名称或手机号"
              @keyup.enter="selectObj"
              v-model="objSearchCon"
            />
            <a-button style="margin-left: 55px;" @click="selectObj">查询</a-button>
          </a-form-item>
          <a-form-item>
            <a-table
              :columns="objColumns"
              :pagination="pagination"
              :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio'}"
              :dataSource="subsidyUserData"
              rowKey="id"
              bordered
            ></a-table>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="cancleSelObj">取消</a-button>
            <a-button type="primary" style="float: right;" @click="saveObj">确定</a-button>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>
<script>
import {
  searchSubsidy,
  getSubsidyUser,
  saveSubsidy
} from "../../store/financialApi.js";
import { setTimeout } from "timers";
export default {
  data() {
    return {
      confirmLoading: false,
      memo: "",
      objectWidth: 800,
      scrollX: {},
      totalSum: 0,
      pageSum: 0,
      keywords: "",
      pagination: false,
      loading: false,
      total: 0,
      adminWords: "",
      seachType: "0",
      createTime: [],
      start_time: 0,
      end_time: 0,
      subType: "0",
      selectRole: "0",
      type: 0,
      role: "",
      startTime: "",
      endTime: "",
      admin: "",
      condition: "",
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 16,
        xl: 24,
        xxl: 48
      },
      subsidyData: [],
      subsidyUserData: [],
      maskClosable: false,
      addBalance: false,
      modalType: 0,
      characterType: 0, // 角色类型
      objTel: "",
      selectedRowKeys: [],
      columns: [
        {
          dataIndex: "index",
          title: "序号",
          fixed: "left",
          width: 60
        },
        {
          title: "流水号",
          width: 200,
          dataIndex: "order_no"
        },
        {
          title: "金额(元)",
          dataIndex: "amount"
        },
        {
          title: "类型",
          dataIndex: "type",
          customRender(type) {
            if (type === 1) {
              return "补贴";
            } else if (type === 2) {
              return "提成 ";
            } else if (type === 3) {
              return "扣减";
            }
          }
        },
        {
          title: "角色",
          dataIndex: "role",
          customRender(role) {
            if (role === 1) {
              return "服务商";
            } else if (role === 2) {
              return "代理商 ";
            } else if (role === 3) {
              return "省分公司";
            } else if (role === 4) {
              return "大区分公司";
            }
          }
        },
        {
          title: "名称",
          dataIndex: "name"
        },
        {
          title: "联系方式",
          dataIndex: "phone"
        },
        {
          title: "创建时间",
          dataIndex: "created_at"
        },
        {
          title: "备注",
          dataIndex: "remark"
        },
        {
          title: "操作人",
          dataIndex: "admin"
        }
      ],
      levelList: [
        {
          key: 0,
          value: "全部"
        },
        {
          key: 1,
          value: "省级代理"
        },
        {
          key: 2,
          value: "市级代理"
        },
        {
          key: 3,
          value: "区县代理"
        }
      ],
      typeList: [{ key: 1, value: "补贴" }, { key: 2, value: "提成" }],
      characterList: [
        { key: 0, value: "请选择角色" },
        { key: 1, value: "服务商" },
        { key: 2, value: "代理商" },
        { key: 3, value: "省级分公司" },
        { key: 4, value: "大区分公司" }
      ],
      form: this.$form.createForm(this),
      showObjMadal: false, // 是否显示选择对象modal
      selectedObj: {}, // 已选择对象
      objLevel: undefined,
      objSearchCon: ""
    };
  },
  computed: {
    modalTitle() {
      if (this.modalType === 1) {
        return "余额调整";
      }
      if (this.modalType === 2) {
        return "余额增加";
      }
      if (this.modalType === 3) {
        return "余额减扣";
      }
    },
    objMadalTitle() {
      if (this.characterType === 0) {
        return "请选择角色";
      }
      if (this.characterType === 1) {
        return "选择服务商";
      }
      if (this.characterType === 2) {
        return "选择代理商";
      }
      if (this.characterType === 3) {
        return "选择省级分公司";
      }
      if (this.characterType === 4) {
        return "选择大区分公司";
      }
    },
    objColumns() {
      if (this.characterType === 1) {
        return [
          {
            dataIndex: "index",
            title: "id",
            customRender(text, record, index) {
              return index + 1;
            }
          },
          {
            title: "服务商账号",
            dataIndex: "account"
          },
          {
            title: "服务商名称",
            dataIndex: "name"
          },
          {
            title: "手机号码",
            dataIndex: "phone"
          },
          {
            title: "所在区域",
            dataIndex: "address"
          }
        ];
      }
      if (this.characterType === 2) {
        return [
          {
            dataIndex: "index",
            title: "id",
            customRender(text, record, index) {
              return index + 1;
            }
          },
          {
            title: "代理商名称",
            dataIndex: "name"
          },
          {
            title: "代理商级别",
            dataIndex: "level"
          },
          {
            title: "手机号码",
            dataIndex: "phone"
          },
          {
            title: "所在区域",
            dataIndex: "address"
          }
        ];
      }
      if (this.characterType === 3) {
        return [
          {
            dataIndex: "index",
            title: "id",
            customRender(text, record, index) {
              return index + 1;
            }
          },
          {
            title: "省级分公司编号",
            dataIndex: "account"
          },
          {
            title: "省级分公司名称",
            dataIndex: "name"
          },
          {
            title: "省级分公司手机号",
            dataIndex: "phone"
          },
          {
            title: "所在省份",
            dataIndex: "address",
            customRender(text, record, index) {
              return text.name;
            }
          }
        ];
      }
      if (this.characterType === 4) {
        return [
          {
            dataIndex: "index",
            title: "id",
            customRender(text, record, index) {
              return index + 1;
            }
          },
          {
            title: "大区分公司编号",
            dataIndex: "account"
          },
          {
            title: "大区分公司名称",
            dataIndex: "name"
          },
          {
            title: "大区分公司手机号",
            dataIndex: "phone"
          }
        ];
      }
    }
  },
  methods: {
    // 获取津贴列表(加筛选)
    loadSubsidy(info) {
      this.loading = true;
      var data = {
        type: this.subType,
        role: this.selectRole,
        startTime: this.start_time,
        endTime: this.end_time,
        admin: this.adminWords,
        condition: this.seachType,
        name: this.keywords,
        page: info.page,
        num: info.pageSize
      };
      searchSubsidy(data).then(res => {
        var array = res.data.list;
        for (let i = 0; i < array.length; i++) {
          array[i]["index"] = (info.page - 1) * info.pageSize + (i + 1);
        }
        this.subsidyData = array;
        if (res.data.list.length > 0) {
          this.scrollX = { x: 1500 };
        } else {
          this.scrollX = {};
        }
        this.total = res.data.total_num;
        this.pageSum = res.data.page_sum;
        this.totalSum = res.data.total_sum;
        this.loading = false;
      });
    },
    getCreateTime(date, str) {
      if (str[0] && str[1]) {
        // console.log()
        this.start_time = new Date(str[0] + " 00:00:00").getTime() / 1000;
        this.end_time = new Date(str[1] + " 23:59:59").getTime() / 1000;
      } else {
        this.start_time = 0;
        this.end_time = 0;
      }
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
      if (selectedRowKeys && selectedRowKeys.length > 0) {
        this.isBatchAudit = true;
      } else {
        this.isBatchAudit = false;
      }
      console.log("已选:", selectedRowKeys);
    },
    // 筛选查询按钮
    searchByKeyword() {
      this.$refs.pageBand.getData();
    },
    // 重置按钮
    resetList() {
      this.subType = "0";
      this.selectRole = "0";
      this.keywords = "";
      this.createTime = [];
      this.start_time = 0;
      this.end_time = 0;
      this.adminWords = "";
      this.seachType = "0";
      this.$refs.pageBand.getData();
    },
    // 首次打开modal
    handleBalance() {
      this.addBalance = true;
      this.modalType = 1;
      this.characterType = 0;
    },
    // 选择角色
    handleChange(value) {
      this.characterType = value;
    },
    // 取消
    cancle() {
      this.modalType = 1;
      this.objTel = "";
      this.confirmLoading = false
    },
    // 提交...
    handleSubmit(e) {
      // e.preventDefault();
      if (this.confirmLoading) {
        return;
      }
      console.log("----");
      this.confirmLoading = true;
      this.form.validateFields((err, values) => {
        if (!err) {
          // 津贴减扣时type为3
          if (this.modalType === 3 && typeof values.type === "undefined")
            values.type = 3;
          var data = {
            type: values.type,
            role: values.role,
            userId: values.user_id,
            amount: values.tips
          };
          if (this.modalType === 3 && this.memo == "") {
            this.$message.error("备注信息不能为空!");
            this.confirmLoading = false;
            return false;
            // console.log(111)
          }
          if (!(this.memo == "")) {
            data.memo = this.memo;
          }
          saveSubsidy(data).then(res => {
            this.addBalance = false;
            this.$refs.pageBand.getEvent();
            setTimeout(() => {
              this.confirmLoading = false;
            });
          }).catch(e => {
            this.confirmLoading = false
          })
        } else {
          this.confirmLoading = false;
        }
      });
    },
    // 打开选择角色对象
    selectObj() {
      this.showObjMadal = true;
      let level = this.objLevel ? this.objLevel : undefined;
      let name = this.objSearchCon !== "" ? this.objSearchCon : undefined;
      getSubsidyUser({
        role: this.characterType,
        page: 1,
        level,
        name
      }).then(res => {
        this.subsidyUserData = res.data.list;
      });
    },
    // 选择对象
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedObj = selectedRows;
    },
    // 确定选择对象
    saveObj() {
      if (this.selectedRowKeys.length === 0) {
        this.$message.warning("请选择对象");
        return;
      }
      this.objTel = this.selectedObj[0].phone;
      this.showObjMadal = false;
      this.form.setFieldsValue({
        user_id: this.selectedObj[0].id
      });
    },
    objLevelSel(value) {
      if (value === 0) {
        this.objLevel = undefined;
      }
      this.objLevel = value;
    },
    // 取消选择对象
    cancleSelObj() {
      this.selectedRowKeys = [];
      this.selectedObj = {};
      this.showObjMadal = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.balance-pop .ant-form-item-label {
  float: left;
}
.search-result-list .pagination {
  margin-top: 0 !important;
}
.sum-show {
  margin-top: 10px;
  p {
    margin: 0;
    padding: 0;
    i {
      margin-right: 190px;
      font-style: normal;
      display: inline-block;
      width: 80px;
    }
  }
}
.ant-table-wrapper {
  margin-top: 0 !important;
}
</style>
